<template>
  <div class="container">
    <div class="searchBar">
      <div class="searchInp">
        <Icon type="search" class="search-icon"></Icon>
        <Icon type="close-circled" class="clear" @click="clear()" v-if="orderNumber!==''"></Icon>
        <input type="text" name="" id="" placeholder="请输入客户姓名或者手机号" v-model="orderNumber" @focus="inputChange()" @input="listenInput" >
      </div>
      <div class="searchBtn" @click="searchBill()">
        搜索
      </div>
    </div>

    <div class="result">
      <nothing @triggerSearch="triggerSearch" v-if="orderNumber==''" :showButton="showButton"></nothing>
      <bill-list v-if="showResult" :searchContent="orderNumber"></bill-list>
    </div>

  </div>

</template>

<script>
import { Toast } from "mint-ui";
import billList from "@/components/bill/billList";
import nothing from "@/components/bill/nothing";
import  api from '../../assets/js/api'
export default {
  data() {
    return {
      orderNumber: "",
      showResult: false,

      //屏幕高度自适应（for android）
      docmHeight: "0",
      showHeight: "0",
      showButton: true,
      isResize: false,
    };
  },
  mounted() {
    this.axios.defaults.baseURL = api
    //默认进入的高度
    this.docmHeight = document.body.clientHeight;
    window.onresize = ()=>{
      // console.log(111);
      // if (!this.isResize) {
      //    this.docmHeight = document.documentElement.clientHeight;
      //    this.isResize = true;
      // }
      this.showHeight = document.body.clientHeight;

      console.log(this.docmHeight,this.showHeight);
    }
  },
  watch: {
    //监听手机屏幕高度
    showHeight:function() {

      let tmpDocmHeight = parseInt(this.docmHeight);
      let tmpShowHeight = parseInt(this.showHeight);

      //如果差距50 那必然是 输入法起来了
      if ((tmpDocmHeight-50) > tmpShowHeight) {
        this.showButton = false;
        console.log("触发了隐藏框",this.showButton);
      } else {
        this.showButton = true;
      }
    }
  },
  methods: {
    // 搜索流水单
    searchBill() {
      if (this.orderNumber == "") {
        Toast({
          message: "搜索流水单号不能为空！",
          position: "bottom",
          duration: 2000
        });
        return false;
      } else {
        this.showResult = true;
      }
    },
    inputChange() {
      this.showResult = false;
    },
    clear() {
      this.orderNumber = "";
      this.showResult = false;
    },

    triggerSearch(data) {
      console.log("父组件收到了",data);
      this.orderNumber = data;
      this.searchBill();

    },
    //限制输入框最长十一位
    listenInput(data) {
      let input = this.orderNumber;
      if (input.length > 11) {
        this.orderNumber = input.slice(0,11)
      }
    }
  },
  components: {
    billList,
    nothing
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  min-height: 100%;
  position: relative;
  .searchBar {
    width: 100%;
    min-height: 72px;
    box-sizing: border-box;
    padding: 20px 15px;
    border-bottom: 1px solid rgba(204, 204, 204, 0.3042);
    background-color: #fff;
    z-index: 99;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    .searchInp {
      height: 32px;
      flex: 14;
      position: relative;
      input {
        height: 100%;
        width: 100%;
        background-color: #f4f4f4;
        border-radius: 40px;
        font-size: 14px;
        padding-left: 40px;
        letter-spacing: 1px;
        color: #666;
        &::placeholder {
          font-size: 14px;
          color: #ccc;
        }
      }
      .search-icon {
        position: absolute;
        font-size: 20px;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
      }
      .clear {
        height: 100%;
        line-height: 32px;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        padding: 0 10px;
      }
    }
    .searchBtn {
      height: 100%;
      line-height: 32px;
      text-align: center;
      font-size: 14px;
      color: #666;
      flex: 2;
    }
  }
  .result {
    height: 100%;
    padding-top: 50px;
  }
}
</style>


